<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .content {
      margin: 150px auto;
      width: 900px;
    }

  </style>
</head>
<body>
  <div id="app" class="content">
    <ul id="example-1">
      <li v-for="item in items">
        {{item.message}}
      </li>
    </ul> 

    <ul id="example-2">
      <li v-for="(item, index) in items">
        {{parentMessage}} - {{index}} - {{item.message}}
      </li>
    </ul> 

    <ul>
      <template v-for="item of items">
        <li>{{ item.message }}</li>
        <li class="divider"></li>
      </template>
    </ul>

    <ul class="demo">
      <li v-for="value in object">
        {{value}}
      </li>
    </ul>

    <ul class="demo">
      <li v-for="(value, key) in object">
        {{key}} : {{value}}
      </li>
    </ul>

    <ul class="demo">
      <li v-for="(value, key, index) in object">
        {{index}}. {{key}} : {{value}}
      </li>
    </ul>

    <div v-for="n in 10">{{n}}</div>
    
    <div>
      <input type="text"
        v-model="newTodoText"
        v-on:keyup.enter="addNewTodo"
        placeholder="add a todo" 
      >
      <ul>
        <li
          is="todo-item"
          v-for="(todo, index) in todos"
          v-bind:title="todo"
          v-on:remove="todos.splice(index, 1)"
        >          
        </li>
      </ul>
    </div>
    <ul>      
      <li v-for="n in evenNumbers">{{ n }}</li>
    </ul>

    <ul>      
      <li v-for="n in even(numbers)">{{ n }}</li>
    </ul>


  </div>
  <script src="../js/lib/vue.js"></script>
  <script src="../js/lib/art-template.js"></script>
  <script src="../js/lib/jquery-2.1.1.js"></script>
  <script>   
    var data = {
      numbers: [1,2,3,4,5,6,7,8,9],
      parentMessage: 'Parent',
      items: [
        {message: "hello "},
        {message: "my "},
        {message: "brother!!!"},
      ],
      object: {
        firstName: "john",
        lastName: "doe",
        age: "30",
      },
      newTodoText: '',
      todos: [
        'Do the dishes',
        'Take out the trash',
        'Mow the lawn'
      ]
    }

    Vue.component('todo-item', {
      template: `
        <li>
          {{ title }}
          <button v-on:click="$emit('remove')">X</button>
        </li>
      `,
      props: ['title']
    }) 

    var app = new Vue({
      el: "#app",
      data: data,
      methods: {
        addNewTodo: function() {
          this.todos.push(this.newTodoText);
          this.newTodoText = '';
        },
        even: function() {
          return this.numbers.filter(function (number) {
            return number % 2 === 0
          })
        }
      },
      computed: {
        evenNumbers: function() {
          return this.numbers.filter(function (number) {
            return number % 2 === 0
          })
        }
      }
    });
  </script>
</body>
</html>